<template >
  <div class='regist'>
    <div class="content">
      <div class='left'>
        <div class="logo">
          <img src="../../assets/login_logo.png" alt="">
        </div>
        <h1> 宜春学院<br/>校园招聘系统 </h1>
        <h3>为了更好的未来</h3>
        <p>Copyright @ wangziyu</p>
      </div>
      <div class="right">
        <div class="form">
          <h2>欢迎注册</h2>
          <a-tabs v-model="activeKey" type="card" @change="tabChange" >
            <a-tab-pane key="stu" tab="学生注册">
              <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                <a-form-item label='邮箱' >
                  <a-input
                    v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱!' }] }]"
                    placeholder="邮箱"
                  />
                </a-form-item>
                <a-form-item label='姓名' >
                  <a-input
                    v-decorator="['name', { rules: [{ required: true, message: '请输入姓名!' }] }]"
                    placeholder="姓名"
                  />
                </a-form-item>
                <a-form-item label='密码' >
                  <a-input-password
                    v-decorator="['password', { rules: [{ required: true, message: '请输入密码!' }] }]"
                    placeholder="密码"
                  ></a-input-password>
                </a-form-item>
                <a-form-item label='班级' >
                  <a-input
                    v-decorator="['from', { rules: [{ required: true, message: '请输入班级!' }] }]"
                    placeholder="班级"
                  ></a-input>
                </a-form-item>
                <a-form-item label='手机号' >
                  <a-input
                    v-decorator="['phone', { rules: [{ required: true, message: '请输入邮箱!' }] }]"
                    placeholder="手机号"
                  />
                </a-form-item>
                <a-form-item name="sex" label="性别">
                  <a-radio-group v-model="sex">
                    <a-radio value="1">男</a-radio>
                    <a-radio value="2">女</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-button type="primary" html-type="submit" >
                  注册
                </a-button>
              </a-form>
            </a-tab-pane>
            <a-tab-pane key="comp" tab="招聘者注册">
              <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
                <a-form-item label='邮箱' >
                  <a-input
                    v-decorator="['email', { rules: [{ required: true, message: '请输入邮箱!' }] }]"
                    placeholder="邮箱"
                  />
                </a-form-item>
                <a-form-item label='姓名' >
                  <a-input
                    v-decorator="['name', { rules: [{ required: true, message: '请输入邮箱!' }] }]"
                    placeholder="姓名"
                  />
                </a-form-item>
                <a-form-item label='密码' >
                  <a-input-password
                    v-decorator="['password', { rules: [{ required: true, message: '请输入密码!' }] }]"
                    placeholder="密码"
                  ></a-input-password>
                </a-form-item>
                <a-form-item label='公司' >
                  <a-input
                    v-decorator="['from', { rules: [{ required: true, message: '请输入公司!' }] }]"
                    placeholder="公司"
                  ></a-input>
                </a-form-item>
                <a-form-item label='职位' >
                  <a-input
                    v-decorator="['position', { rules: [{ required: true, message: '请输入职位!' }] }]"
                    placeholder="职位"
                  ></a-input>
                </a-form-item>
                <a-form-item label='手机号' >
                  <a-input
                    v-decorator="['phone', { rules: [{ required: true, message: '请输入邮箱!' }] }]"
                    placeholder="手机号"
                  />
                </a-form-item>
                <a-form-item name="sex" label="性别">
                  <a-radio-group v-model="sex">
                    <a-radio value="1">男</a-radio>
                    <a-radio value="2">女</a-radio>
                  </a-radio-group>
                </a-form-item>
                <p class="toComp">公司未注册？ 点击 <router-link to="/regist_comp">去注册公司</router-link></p>
                <a-button type="primary" html-type="submit">
                  注册
                </a-button>
              </a-form>
            </a-tab-pane>
          </a-tabs>
          <p>已有账号？ 点击 <router-link to="/login">去登录</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import './styles.less'
import userAPI from '../../services/user'
import { requestWrapper } from '../../utils/request'
import { Modal } from 'ant-design-vue';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  data() {
    return {
      formLayout: 'inline',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      activeKey: 'stu',
      sex: '1',
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          values.role = this.activeKey
          values.sex = this.sex
          values.headImg = "api/v1/icons?path=icons/de/50/de50d524261b5079146bd43d2d382a87.jpg"
          requestWrapper( userAPI.regist.bind(null, values), {
              autoSuccess: true,
              // successMessage: '注册成功！',
              errorJudgeFn: res => res.code !== 0 && res.code !== 200300,
              formatDataFn: res => res,
          }).then((res) => {
            if(res.code === 200300){
              console.log(res.code);
              this.showConfirm(this)
            }
            this.$router.push({path:'/login'})
          })
        }
      });
    },

    tabChange(v) {
      this.form.resetFields();
    },

    showConfirm(v) {
      console.log(123);
      Modal.confirm({
        title: '您的公司暂时还没有注册，请您先注册公司！',
        cancelText: '取消',
        okText: '去注册',
        onOk() {
          v.$router.push({
            path: '/regist_comp'
          });
        },
        class: 'test',
      });
    },

    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = info.file.response.result.urlPath;
          this.loading = false;
        });
      }
    },

    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  },
};

</script>


